<template>
  <div>
    <div class="banner linear-bg-blue">
      <a :href="link" class="link">帐户信息</a>
      <p class="info">帐户总金额: {{allAmount}}</p>
      <p class="info">帐户冻结金额: {{freezenAmount}}</p>
    </div>

    <div v-if="memberType===2" class="switch-wrap">
      <span class="label">提现到</span>
      <span style="padding-right:5px">对私帐户</span>
      <i-switch v-model="form.withdrawType" @change="handleSwitchType"></i-switch>
      <span style="padding-left:5px">对公帐户</span>
    </div>
    <div class="input-wrap">
      <p class="label">提现</p>
      <div class="input-field">
        <input
          v-model="form.orderAmount"
          class="input-block"
          type="digit"
          placeholder="请输入提现金额"
          placeholder-class="placeholder-part"
        >
        <span class="btn-text" @click="handleWithdraw">提现</span>
      </div>
    </div>

    <div class="popup-window" :class="{show:showConfirm}">
      <span class="close-icon" @click="handleHide">&times;</span>
      <div class="popup-wrap">
        <div class="input-field">
          <input
            v-model="form.verificationCode"
            class="input-block"
            type="text"
            placeholder="请输入验证码"
            placeholder-class="placeholder-part"
            maxlength="6"
          >
          <span class="btn-text" @click="cloudAccountWithdraw2">确认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_CLOUD_ACCOUNT_INFO,
  FIND_CLOUD_ACCOUNT_CARD_INFO,
  FIND_CLOUD_ACCOUNT_BALANCE,
  CLOUD_ACCOUNT_WITHDRAW,
  CLOUD_ACCOUNT_WITHDRAW_CONFIRM
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      balance: {},
      memberType: 3,
      form: {
        withdrawType: false,
        orderAmount: '',
        verificationCode: ''
      },
      bizOrderNo: '',
      showConfirm: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    link () {
      let type = ''
      if (this.memberType === 3) {
        type = 'PERSONAL'
      } else if (this.memberType === 2) {
        type = 'COMPANY'
      }
      return '/pages/mine/cloud-account/info/main?memberType=' + type
    },
    allAmount () {
      return this.formatMoney(this.balance.allAmount)
    },
    freezenAmount () {
      return this.formatMoney(this.balance.freezenAmount)
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getCloudAccountInfo()
  },
  methods: {
    getCloudAccountInfo () {
      const vm = this

      FIND_CLOUD_ACCOUNT_INFO(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let { memberInfo, memberType } = JSON.parse(r.data.data)
            console.log(memberInfo)
            vm.memberType = memberType
            if (!memberInfo) {
              return false
            } else if (memberType === 3) {
              // 个人云账户
              if (memberInfo.isIdentityChecked) {
                vm.judgementPersonal(memberInfo)
              } else {
                // 实名认证页面
                vm.$router.replace(
                  '/pages/mine/cloud-account/step6/main?bizUserId=' +
                    memberInfo.bizUserId
                )
              }
            } else if (memberType === 2) {
              // 企业云帐户
              vm.judgementCompany(memberInfo)
            }
            vm.$cookie.set('cloud-account-info', memberInfo)
          } else if (!r.data.data) {
            vm.$router.replace('/pages/mine/cloud-account/step1/main')
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getBindCardInfo (state) {
      const vm = this

      FIND_CLOUD_ACCOUNT_CARD_INFO(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data) {
              // 已绑卡
              vm.getBalance()
            } else if (state) {
              // 去绑定银行卡
              vm.$router.replace(
                '/pages/mine/cloud-account/step3/personal/main'
              )
            } else {
              // 去绑定手机
              vm.$router.replace(
                '/pages/mine/cloud-account/step2/personal/main'
              )
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getBalance () {
      const vm = this

      FIND_CLOUD_ACCOUNT_BALANCE(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.balance = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    judgementPersonal (info) {
      let { isIdentityChecked, isPhoneChecked } = info
      this.getBindCardInfo(isIdentityChecked || isPhoneChecked)
    },
    judgementCompany (info) {
      const vm = this

      let { status, failReason } = info

      if (status === 3) {
        vm.$alert(failReason, '审核失败').then(r => {
          vm.$router.replace('/pages/mine/cloud-account/step2/company/main')
        })
      } else {
        vm.getBalance()
      }
    },
    formatMoney (money) {
      if (money || money === 0) {
        return (money * 0.01).toFixed(2)
      } else {
        return ''
      }
    },

    handleSwitchType (e) {
      let val = e.target.value
      this.form.withdrawType = val
    },
    handleWithdraw () {
      if (!this.form.orderAmount) {
        this.$toast('请输入提现金额')
      } else {
        this.cloudAccountWithdraw()
      }
    },
    handleHide () {
      this.showConfirm = false
      setTimeout(() => {
        this.form.withdrawType = false
        this.form.orderAmount = ''
        this.form.verificationCode = ''
        this.bizOrderNo = ''
      }, 300)
    },
    cloudAccountWithdraw () {
      const vm = this

      let params = {
        identity: 'SHOP',
        orderAmount: vm.form.orderAmount * 100,
        relateMan: vm.account.shopId,
        withdrawType: vm.form.withdrawType ? 2 : 1 // 1 对私 // 2 对公
      }

      CLOUD_ACCOUNT_WITHDRAW(params)
        .then(r => {
          if (r.data.code === '0') {
            let { merOrderNum } = r.data.data
            vm.bizOrderNo = merOrderNum
            vm.showConfirm = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    cloudAccountWithdraw2 () {
      const vm = this

      if (!vm.form.verificationCode) {
        vm.$toast('请输入验证码')
        return false
      }

      let params = {
        bizOrderNo: vm.bizOrderNo,
        bizUserId: vm.account.shopId,
        verificationCode: vm.form.verificationCode
      }

      CLOUD_ACCOUNT_WITHDRAW_CONFIRM(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.handleHide()
            vm.$toast('操作成功')
            vm.getBalance()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.banner {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  > .link {
    align-self: flex-end;
  }
  > .info {
    line-height: 200%;
  }
}
.switch-wrap {
  padding: 15px 15px 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .label {
    flex-grow: 1;
  }
}
.input-wrap,
.popup-wrap {
  padding: 15px;
  font-size: 15px;
  > .label {
    margin-bottom: 10px;
  }
  > .input-field {
    padding: 5px 10px;
    border: 1px solid $light-gray;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .input-block {
      flex-grow: 1;
    }
    > .btn-text {
      color: $blue;
      padding: 0 5px;
    }
  }
}
.popup-window {
  display: flex;
  justify-content: center;
  align-items: center;
  > .popup-wrap {
    background-color: $white;
    width: 280px;
    border-radius: 8px;
  }
}
</style>
